<template>
  <view class="container">
    <button @click="openMap" class="open-map-btn">选择位置</button>
    
    <view v-if="selectedLocation" class="location-info">
      <text class="title">已选择位置：</text>
      <text class="address">{{ selectedLocation.address }}</text>
      <text class="coords">经纬度: {{ selectedLocation.latitude }}, {{ selectedLocation.longitude }}</text>
    </view>
    
    <!-- 谷歌地图组件 -->
    <uni-map 
      :visible="showMap" 
      @callback="handleLocationCallback" 
      @close="handleMapClose"
    />
  </view>
</template>

<script>
import uniMap from './uniMap.vue'

export default {
  components: {
    uniMap
  },
  
  data() {
    return {
      showMap: false,
      selectedLocation: null
    }
  },
  
  methods: {
    // 打开地图选择器
    openMap() {
      this.showMap = true
    },
    
    // 处理位置选择回调
    handleLocationCallback(locationData) {
      console.log('选择的位置:', locationData)
      this.selectedLocation = locationData
      this.showMap = false
    },
    
    // 处理地图关闭
    handleMapClose() {
      this.showMap = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.open-map-btn {
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  margin-bottom: 20px;
}

.location-info {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  
  .title {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
  }
  
  .address {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
  }
  
  .coords {
    display: block;
    color: #999;
    font-size: 12px;
  }
}
</style>